<template>
    <div class="business-form">
        <my-form v-model="form" :label-width="'180px'" @submit="submitHandler" @cancle="cancleHandler" ref="form">
            <el-row>
                <el-col :span="22">
                    <el-form-item label="选择合适身份">
                        <el-radio-group v-model="form.identity">
                            <el-radio :label="1">招标单位(寻找招标项目)</el-radio>
                            <el-radio :label="2">分包单位(寻找已中标的项目信息)</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="选择地区">
                        <select-module 
                            ref="major"
                            v-model="form.cityIds"
                            :options="cities" 
                            :keyName="`valueid`" 
                            :contentName="`valuename`" 
                        ></select-module>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="所属行业">
                        <select-module 
                                ref="major"
                                v-model="form.majorIds"
                                :options="majorList" 
                                :keyName="`valueid`" 
                                :contentName="`valuename`" 
                            >
                        </select-module>
                    </el-form-item>
                </el-col>

                <el-col :span="22">
                    <el-form-item label="标的物名称" prop="test" :rules="newRule('发票类型', 'required')">
                        <el-input v-model="form.test" style="width:370px" placeholder="请输入标的物名称"></el-input>
                        <span>&nbsp;最多可设置5个标的物</span>
                    </el-form-item> 
                </el-col>

                <el-col :span="11">
                    <el-form-item label="项目经理" prop="test1" :rules="newRule('发票类型', 'required')">
                        <el-input v-model="form.test1" style="width:175px" placeholder="请输入项目经理"></el-input>
                    </el-form-item> 
                </el-col>

                <el-col :span="11">
                    <el-form-item label="联系方式" prop="test2" :rules="newRule('发票类型', 'required')">
                        <el-input v-model="form.test2" style="width:175px" placeholder="请输入联系方式"></el-input>
                    </el-form-item> 
                </el-col>
                
                <el-col :span="22">
                    <el-form-item label="提供人账号">
                        <el-input style="width:370px"></el-input>
                    </el-form-item> 
                </el-col>

                <el-col :span="22">
                    <el-form-item label="账号手机号可联系到我">
                        <el-radio-group v-model="form.iscontact">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item> 
                </el-col>
            </el-row>

            <div slot="btn">
                <el-button type="primary" @click="clickHandler">提交</el-button>
            </div>

            <div slot="other" class="checkbox">
                <el-checkbox v-model="form.checked">勾选默认阅读且承诺的商机准确靠谱</el-checkbox>
            </div>
            
        </my-form>

    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import selectModule from '@/pages/application/info/components/select-module.vue';

export default {
    components: {
        selectModule,
    },
    async asyncData(context) {},
    props: {

    },
    data() {
        return {
            form:{
                identity:1,
                iscontact:1,
                cityIds:[],
                majorIds:[],
                checked:false
            },
            majorList: [],
        };
    },
    computed: {
        cities() {
            return this.$store.getters['city/getCitiesByProvinceCode']('130000');
        },
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
        }),
        clickHandler(){
            this.$refs.form.onSubmit();
        },
        submitHandler(){
            console.log(11);
        },
        cancleHandler(){
            this.$emit('close');
        },
        getMajorList() {
            this.$get(`${this.$store.state.api.tbUrl}/searchrelated/getindustries.json`, {}, (data, res) => {
                this.majorList = data;
            });
        },

    },
    mounted() {
        this.getMajorList();

        this.queryCity();
    },
    created() {

    },


};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

    .business-form{
        .checkbox {
            text-align: center;
            margin-top: -5px;
            margin-bottom: 1em;
            ::v-deep .el-checkbox__inner{
                border-radius: 50% !important;
            }
        }
    }   

</style>
